<template>
  <div class="box">
    <button @click="comName='v-zhi-neng'">智能先锋</button>
    <button @click="comName='v-jia-ju'">家居优品</button>
    <button @click="comName='v-chao-shi'">超市百货</button>
    <!--缓存 ,缓存以后销毁的生命周期就没有了，自己增加两个生命周期 activated,deactivated
        如果操作一次（请求数据）放mounted
        每次都需要进行的操作，放activated -->
    <keep-alive>
      <div :is="comName"></div>
    </keep-alive>
   


  </div>
</template>

<script>
import vZhiNeng from "./case2/vZhiNeng.vue";
import vJiaJu from "./case2/vJiaJu.vue";
import vChaoShi from "./case2/vChaoShi.vue";
export default {
  components: {
    vZhiNeng,
    vJiaJu,
    vChaoShi
  },
  data(){
    return {
        comName:"v-zhi-neng"
    }
  }
};
</script>

<style>
</style>